<template>
  <div class="div_box">

    <i class="el-icon-caret-top" @click="top" style="font-size: 20px;"></i>
    <div class="scrollX" ref="scrollBox">
      <div class="scroll_box" ref="refscroll">
        <div :class="highlightindex == index ? 'content2 content' : 'content'" v-for="(item, index) in floorList"
          :key="index" @click="highlight(index, item)" ref="refcontent">{{ item.name }}</div>
      </div>
    </div>
    <i class="el-icon-caret-bottom" @click="bottom" style="font-size: 20px;"></i>

  </div>
</template>

<script>
import { reqSpaceManager } from "@/api/api";
import { mapState, mapMutations } from "vuex";

export default {
  components: {
  },
  data() {
    return {
      scrollPosition: 0,
      floorList: [],
      scrollNum: 0,
      scrollBoxWidth: 0,//父级宽度
      highlightindex: 0,
      contentMargin: 0,//楼层外边距
    };
  },
  computed: {
    ...mapState(["user", "datav"])
  },
  watch: {
  },
  methods: {
    ...mapMutations(["savefloorId", "savefloorFlag", "savespacesFlag"]),
    // 获取楼层列表
    async getFloorList() {
      let res = await reqSpaceManager(1, 50, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.datav.orgarr.id,//单位id
        parentId: this.datav.buildingsArr.id,//建筑物id
        metaCode: 2,
        isStatistics: 0
      });
      // console.log(res);
      this.highlightindex = 0;//默认选第一个
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.floorList = res.data.rows || [];
      // this.floorList.unshift({
      //   name: "全部",
      //   id: 1
      // });

      // this.savefloorId(1)// 存储楼层id
      this.savespacesFlag(!this.datav.spacesFlag)//监听安装点
      this.$emit('getFloorName', res.data.rows[0])

      // this.savefloorId(this.floorList.length != 0 ? this.floorList[0].id : '')// 存储楼层id
      // this.savefloorFlag(!this.datav.floorFlag)//监听楼层
      // this.$emit('getFloorName', this.floorList.length != 0 ? this.floorList[0].name : '')

      this.$nextTick(() => {
        const scrollBoxes = this.$refs.refcontent;
        // console.log(scrollBoxes);
        if (scrollBoxes == null) return;
        scrollBoxes.forEach((scrollBox) => {
          scrollBox.style.margin = `${this.contentMargin}px 0`; // 设置外边距
        });
      })

    },
    // 点击高亮
    highlight(index, e) {
      this.highlightindex = index
      // console.log(e);
      this.$emit('getFloorName', e)
      // this.$parent.getclear()//回到初始状态
      // if (e.id == 1) {
      //   this.savefloorId(e.id)// 存储楼层id
      //   this.savefloorFlag(!this.datav.floorFlag)//监听楼层 触发安装点
      //   this.savespacesFlag(!this.datav.spacesFlag)//监听安装点 触发设备列表
      //   this.$emit('getFloorName', '')
      // } else {
      //   this.savefloorId(e.id)// 存储楼层id
      //   this.savefloorFlag(!this.datav.floorFlag)//监听楼层 触发安装点
      //   this.$emit('getFloorName', e.name)
      // }

    },
    bottom() {
      this.scrollNum += this.scrollBoxWidth //this.$refs.scrollBox.offsetHeight 屏幕一屏幕二切换时有bug
      if (this.scrollNum >= this.$refs.refscroll.offsetHeight) {
        this.scrollNum += -this.scrollBoxWidth //this.$refs.scrollBox.offsetHeight
        return;
      }
      this.$refs.refscroll.style.transform = `translateY(-${this.scrollNum}px)`;
    },
    top() {
      // console.log(this.$refs.refscroll.offsetHeight);
      // console.log(this.$refs.scrollBox.offsetHeight);
      // console.log(this.scrollNum);
      if (this.scrollNum == 0) return;
      this.scrollNum -= this.scrollBoxWidth //this.$refs.scrollBox.offsetHeight
      this.$refs.refscroll.style.transform = `translateY(-${this.scrollNum}px)`;
    },

  },

  async mounted() {
    this.scrollNum = 0;
    this.$refs.refscroll.style.transform = `translateY(-0px)`;
    this.getFloorList()
    this.scrollBoxWidth = this.$refs.scrollBox.offsetHeight;

    // 根据电脑不同尺寸显示的高度，计算出边距
    let num = parseFloat(this.scrollBoxWidth / 7).toFixed(2)//一列显示七个
    this.contentMargin = parseFloat((num - 46) / 2).toFixed(2)//减去每个48px
  },
  created() {
  },
  activated() {
    this.scrollNum = 0;
    this.$refs.refscroll.style.transform = `translateY(-0px)`;
    this.getFloorList()
    this.scrollBoxWidth = this.$refs.scrollBox.offsetHeight;

    // 根据电脑不同尺寸显示的高度，计算出边距
    let num = parseFloat(this.scrollBoxWidth / 7).toFixed(2)//一列显示七个
    this.contentMargin = parseFloat((num - 46) / 2).toFixed(2)//减去每个48px
  },
  destroyed() {

  },
};
</script>

<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.div_box {
  color: #fff;
  padding: 20px 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  .fontSize(20);
  display: flex;
  flex-direction: column;
  align-items: center;

  >i {
    cursor: pointer;
  }

  .scrollX {
    //   width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 10px 0;

    .scroll_box {
      // display: flex;
      // // display: inline-flex;
      // flex-direction: column;
      transition: all 0.5s ease;

      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(7, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;

      .content {
        flex-shrink: 0;
        width: 46px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 46px;
        // width: 5.5vh;
        // height: 5.5vh;
        // margin-top:  21px;
        // margin: 17.5px 0;
        // margin-bottom: 30px;
        text-align: center;
        font-size: 12px;
        box-sizing: border-box;
        cursor: pointer;
        border-radius: 50%;
        background-color: #091D7A;
        border: 2px solid #00EDFE;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .content2 {
        background: #114683;
        box-sizing: border-box;
        color: #01EAFC;
        box-shadow: inset 0 0 3px rgba(1, 234, 252, 1);
        font-weight: 600;
      }
    }

  }

}
</style>